import React, { Component } from 'react'
import { observer } from 'mobx-react/custom'
// import { Button } from 'antd-mobile'
import SaleNecessaryVM from 'cvm/record/saleNecessary'
import './saleNecessary.less'

const SaleNecessaryList = observer(({ vm }) => {
  return (
    <div className='sale-necessary'>
      <div className='flex-wrap sale-box'>
        <div className='flex-1 logo'><img src={require('../../images/logo-small.png')} /></div>
        <div className='flex-4 detail'>
          <p className='title'>玖里产品介绍</p>
          <p className='explicit'>通过简介让客户了解玖里的产品功能特点、优势，为客户带来的价值，促进销售达成。</p>
          <p className='box'>
            <span className='inline' onClick={() => { vm.handleInlineLook(1) }}>在线浏览</span>
            <span className='load'>
              <a href='javascript:;' className='copy' onClick={() => { vm.handleCopyLink(1) }}>复制链接</a>
              在电脑浏览器打开下载
            </span>
          </p>
        </div>
      </div>
      <div className='flex-wrap sale-box'>
        <div className='flex-1 logo'><img src={require('../../images/logo-small.png')} /></div>
        <div className='flex-4 detail'>
          <p className='title'>玖里产品采购合同</p>
          <p className='explicit'>与客户达成设备采购计划后，下载采购合同完成签约，迅速促成实际销售订单。</p>
          <p className='box'>
            <span className='inline' onClick={() => { vm.handleInlineLook(2) }}>在线浏览</span>
            <span className='load'>
              <a href='javascript:;' className='copy' onClick={() => { vm.handleCopyLink(2) }}>复制链接</a>
              在电脑浏览器打开下载
            </span>
          </p>
        </div>
      </div>
      <div className='flex-wrap sale-box'>
        <div className='flex-1 logo'><img src={require('../../images/logo-small.png')} /></div>
        <div className='flex-4 detail'>
          <p className='title'>玖里平台服务合同</p>
          <p className='explicit'>与客户达成服务采购计划后，下载服务合同完成签约，迅速促成实际销售订单。</p>
          <p className='box'>
            <span className='inline' onClick={() => { vm.handleInlineLook(3) }}>在线浏览</span>
            <span className='load'>
              <a href='javascript:;' className='copy' onClick={() => { vm.handleCopyLink(3) }}>复制链接</a>
              在电脑浏览器打开下载
            </span>
          </p>
        </div>
      </div>
    </div>
  )
})

@observer
class saleNecessary extends Component {
  constructor (props) {
    super(props)
    window.document.title = '销售必备'
    this.vm = new SaleNecessaryVM(props)
  }
  render () {
    return (
      <div>
        <SaleNecessaryList vm={this.vm} />
      </div>
    )
  }
}

export default saleNecessary
